<template>
    <div class="view-report-detail">
        <el-row>
            <el-col :span="12">
                <h1 class="title">模板编辑</h1>
            </el-col>
            <el-col :span="12">
                <el-row>
                    <el-col :span="4">
                        <el-upload
                                :data="form"
                                :limit="1"
                                action="/api/report/reportIndex/upload"
                                :on-success="handleSuccess"
                        >
                            <!--:on-error="handleError"-->
                            <!---->
                            <!--:file-list="fileList"-->
                            <el-button size="small" type="primary">上传</el-button>
                        </el-upload>
                    </el-col>
                    <el-col :span="4" :offset="1" v-if="type=='update'">
                        <el-button size="small" type="primary" @click="downLoad">下载</el-button>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form ref="form" :rules="rules" :model="form" label-width="90px">
                    <!-- <el-form-item label="模板id">
                        <el-input v-model="form.id" disabled></el-input>
                    </el-form-item> -->
                    <el-form-item label="模板名称" prop="templateName">
                        <el-input v-model="form.templateName"></el-input>
                    </el-form-item>
                    <el-form-item label="模板语言" prop="templateLang">
                        <el-select v-model="form.templateLang" placeholder="请选择">
                            <el-option
                                    v-for="item in templateLangData"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="模板编码" prop="reportCategoryCode">
                        <el-input v-model="form.reportCategoryCode"></el-input>
                    </el-form-item>
                    <el-form-item label="模板类型" prop="templateType">
                        <el-input v-model="form.templateType"></el-input>
                    </el-form-item>
                    <el-form-item label="使用状态" prop="forbid">
                        <el-select v-model="form.forbid" placeholder="请选择">
                            <el-option
                                    v-for="item in forbidData"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                        <el-button @click="onCanel">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

    </div>
</template>
<script>
    import configData from "./data";

    export default {
        data() {
            return {
                type: '',
                upload: '',
                form: {
                    forbid: "",
                    id: "",
                    reportCategoryCode: "",
                    templateLang: "",
                    templateName: "",
                    templateType: ""
                },
                forbidData: [],
                templateLangData: [],
                rules: {
                    templateName: [{required: true, message: '请输入模板名称', trigger: 'blur'}],
                    reportCategoryCode: [{required: true, message: '请输入模板编码', trigger: 'blur'}],
                    templateLang: [{required: true, message: '请输入模板语言', trigger: 'change'}],
                    // sequence:[ { required: true, message: '请输入序号', trigger: 'blur' }],
                }
            };
        },
        methods: {
            onSubmit() {
                if (!this.validate()) return;
                const path = 'report/list/' + (this.type === 'add' ? 'insert' : 'update');
                this.$api
                    .request({
                        path,
                        method: "POST",
                        data: this.form
                    })
                    .then(({code, msg}) => {
                        if (code === 200) {
                            this.$router.go(-1);
                            this.$message({
                                message: "保存成功！",
                                type: "success"
                            });
                        } else {
                            this.$message({
                                message: msg,
                                type: "error"
                            });
                        }
                    })
                    .catch(() => {
                    });
            },
            onCanel() {
                this.$router.go(-1);
            },
            downLoad() {
                //   console.log("下载");
                window.open('http://10.66.3.221:8181/report/reportIndex/download?path=' + this.form.templatePath)
            },
            //验证
            validate() {
                let res;
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        res = true;
                    } else {
                        res = false;
                        return false;
                    }
                });
                return res;
            },
            beforeUpload() {
                if (!this.validate()) {
                    return false;
                }
            },
            handleExceed() {
                alert('一次只能上次一个文件');
            },
            handleError(/*file, fileList*/) {
            },
            /**
             * 上传成功
             * @param data 上传成功后的路径
             */
            handleSuccess({ data, code, message }) {
                if (code === 200) {
                    this.form.templatePath = data;
                    this.$message.success('上传成功');
                    return;
                }
                this.$message.warning(message);
            },
            // handleChange(file, fileList) {
                // console.log('333333333');
                // console.log(file);
                // console.log(fileList);
                // if (file.status == 'ready') {
                    // console.log(this.$refs.form);
                    // this.$refs.form.submit();
                    // this.$api.request({
                    //     path: "report/list/upload",
                    //     method: "POST",
                    //     data: fileList
                    // })
                    //     .then((data) => {
                    //         console.log(data);
                    //     })
                    //     .catch(() => {
                    //     });
                // }
            // },
        },
        created() {
            this.forbidData = configData.forbidEnum;
            this.templateLangData = configData.templateLangEnum;
            if (this.$route.params.type == 'add') {
                this.type = 'add';
                this.upload = '';
            } else {
                this.type = 'update';
                this.form = this.$route.params;
            }
        }
    };
</script>
<style lang="scss">
    .view-report-detail {
        width: 100%;
        .title {
            margin: 12px;
        }
        .el-select {
            width: 100%;
        }
    }
</style>


